<template>
    <div>
        <Modal v-model="videoUploadFlag"
               @on-ok="videoModal.videoManagerFlag = true,videoUploadFlag = false"
               @on-cancel="videoModal.videoManagerFlag = true,videoUploadFlag = false"
               :styles="{top: '200px'}" title="视频上传">
            <Upload
                    multiple
                    type="drag"
                    paste
                    :data="{'classId':videoModal.classId}"
                    :headers="Authorization"
                    accept="video/*"
                    :format="['mp4','AVI','rmvb','rm','FLV','3GP']"
                    :on-format-error="handleFormatError"
                    :before-upload="beforeupload"
                    action="/api/backstage/class/uploadVideo">
                <div style="padding: 20px">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>视频上传（可批量批量上传，按住Ctrl键在点击上传文件可进行批量选着，也可在文件夹批量选中然后拖拽在框内）</p>
                </div>
            </Upload>
        </Modal>
        <Modal width="900"
               v-model="videoModal.videoManagerFlag"
               @on-ok="ok"
               @on-cancel="cancel"
               :loading="loading1"
               :styles="{top: '100px'}" title="视频管理">
                <div style="max-height:800px;overflow-y:auto;overflow-x:hidden;">
                    <Button type="success" style="margin-bottom: 10px" @click="videoUploadFlag = true,videoModal.videoManagerFlag = false">上传</Button>
                    <Table border :columns="VideoColumns" :data="VideoList">
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="">编辑</Button>
                            <Button type="error" size="small" style="margin-right: 5px" @click="">删除</Button>
                            <Button type="success" size="small" @click="">预览</Button>
                        </template>
                    </Table>
                </div>
        </Modal>
    </div>
</template>

<script>
    import jscookie from "js-cookie";
    export default {
        props: {
            videoModal: {
                videoManagerFlag: false,
                classId: null,

            }
        },
        data() {
            return {
                loading1: true,
                videoUploadFlag:false,
                Authorization:{AuthorizationNotes:null},
                VideoList:[],
                VideoColumns:[
                    {
                        title: '视频名称',
                        key: 'resourceTitle'
                    },
                    {
                        title: '播放地址',
                        key: 'resourceUrl'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ]
            }
        },
        methods: {
            ok() {
                this.$parent.videoModal.videoManagerFlag = false
                this.$parent.modal.bindingvideoFlag = true
            },
            cancel() {
                this.$parent.videoModal.videoManagerFlag = false
                this.$parent.modal.bindingvideoFlag = true
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件类型出错',
                    desc: '只支持\'mp4\',\'AVI\',\'rmvb\',\'rm\',\'FLV\',\'3GP\''
                });
            },
            /**
             * 文件上传前配置请求头以及cookie信息
             */
            beforeupload(){
                let time = new Date();
                this.Authorization.AuthorizationNotes = time.getTime()
                let token = sessionStorage.getItem("token")
                jscookie.set("token",token)
                return true;
            },
            getvideoList(){
                this.http.get("/class/getvideoList"+this.videoModal.classId)
                    .then(res=>{
                        if(res.data){
                            this.VideoList = res.data
                        }
                    })
            }
        },
        watch: {
            'videoModal.videoManagerFlag'(val) {
                if (val) {
                    this.getvideoList()
                }
            }
        }
    }
</script>

<style scoped>

</style>